<template>
  <Dialog
    v-model="show"
    @confirm="handleSubmit"
    @close="close"
    :title="t('service.编辑售后')"
    width="600px"
    :confirmLoading="confirmLoading"
  >
    <div class="">
      <el-form ref="formRef" :model="form" label-width="120px" :rules="rules">
        <el-form-item :label="t('service.售后类型')" prop="type">
          <el-select v-model="form.type" :placeholder="t('service.请选择售后类型')">
            <el-option
              v-for="item in serviceTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="t('service.售后原因')" prop="reason">
          <el-input
            v-model="form.reason"
            type="textarea"
            rows="4"
            :placeholder="t('service.请输入售后原因')"
          />
        </el-form-item>
        <el-form-item :label="t('service.退款金额')" prop="refundAmount" v-if="form.type === 1 || form.type === 2 || form.type === 4">
          <el-input-number
            v-model="form.refundAmount"
            :placeholder="t('service.请输入退款金额')"
            :min="0"
            :max="props.data.payRealSku"
            controls-position="right"
          >
            <template #suffix>{{ t('service.元') }}</template>
          </el-input-number>
        </el-form-item>
        <el-form-item :label="t('service.退货地址')" prop="returnAddress" v-if="form.type === 2 || form.type === 3">
          <el-input
            v-model="form.returnAddress"
            type="textarea"
            rows="3"
            :placeholder="t('service.请输入退货地址')"
          />
        </el-form-item>
      </el-form>
    </div>
  </Dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import Dialog from "@/components/dialog.vue";
import Api from "@/config/api/api";
import { ElMessage } from "element-plus";

const { t } = useI18n();

const show = defineModel();
const emit = defineEmits(["success"]);
const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

const formRef = ref();
const confirmLoading = ref(false);

// 售后类型选项
const serviceTypeOptions = [
  { label: t('service.退款'), value: 1 },
  { label: t('service.退货退款'), value: 2 },
  { label: t('service.换货'), value: 3 },
  { label: t('service.仅退款'), value: 4 },
];

const form = ref({
  type: "",
  reason: "",
  refundAmount: 0,
  returnAddress: "",
});

const rules = ref({
  type: [{ required: true, message: t('service.请选择售后类型'), trigger: "change" }],
  reason: [{ required: true, message: t('service.请输入售后原因'), trigger: "blur" }],
  refundAmount: [{ required: true, message: t('service.请输入退款金额'), trigger: "blur" }],
  returnAddress: [{ required: true, message: t('service.请输入退货地址'), trigger: "blur" }],
});

watch(show, (val) => {
  if (val && props.data.id) {
    // 填充表单数据
    form.value = {
      type: props.data.type,
      reason: props.data.reason,
      refundAmount: props.data.refundAmount || 0,
      returnAddress: props.data.returnAddress || "",
    };
  }
});

const handleSubmit = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      confirmLoading.value = true;
      Api.serviceUpdate({
        ...form.value,
        id: props.data.id,
      }).then((res) => {
        if (res.status === 200) {
          ElMessage.success(t('service.编辑成功'));
          close();
          emit("success");
        }
      }).finally(() => {
        confirmLoading.value = false;
      });
    }
  });
};

const close = () => {
  form.value = {
    type: "",
    reason: "",
    refundAmount: 0,
    returnAddress: "",
  };
  show.value = false;
  formRef.value.resetFields();
};
</script>

<style lang="scss" scoped>
.h-500 {
  height: 500px;
}
.lht-38 {
  line-height: 38px;
}
.w-120 {
  width: 120px;
}
</style>
